<script setup lang="ts">
// import { ref } from 'vue'
// import { indexApi } from '@/services/index'
// const recommandData = ref<CreativesInnerType[] | undefined>([])
// const title = ref<string | undefined>('')

import type { CreativesInnerType } from '@/services/type'
interface Props {
  recommandData: CreativesInnerType[]
  title: string
}
const props = defineProps<Props>()
// indexApi().then((res)=>{
//   title.value = res.data.blocks[2].uiElement?.subTitle.title
//   recommandData.value = res.data.blocks[2].creatives
// })

// 跳转歌单播放页面
const goSonglist = (id:string) => {
  console.log(id)
  uni.navigateTo({
    url: `/pages/songlist/songlist?id=${id}`
  })
}
</script>

<template>
  <view class="recommandSongList">
    <uni-section :title="props.title" type="line">
      <view class="line2">
        <view class="item" v-for="(item) in props.recommandData" :key="item.uiElement?.image?.imageUrl" @click="goSonglist(item.creativeId)">
          <!-- {{ item.uiElement.image.imageUrl1 }} -->
          <image :src="item.uiElement?.image?.imageUrl" mode="widthFix" class="image"></image>
          <view class="title">{{ item.uiElement?.mainTitle?.title }} {{ item.uiElement?.labelTexts?.map(v => v).join('') }}</view>
        </view>
    </view>
    </uni-section>
  </view>
</template>

<style scoped lang="scss">
.line2::-webkit-scrollbar{
  display: none;
}
.line2{
  display: flex;
  height: 380rpx;
  padding: 30rpx;
  overflow-x: scroll;
  .item{
    width: 300rpx;
    height: 240rpx;
    flex-shrink: 0;
    margin-right: 10rpx;
    .image{
      width: 100%;
    }
    .title{
      width: 100%;
      font-size: 24rpx;
    }
  }
}
</style>